{% extends 'base/index.html' %}

{% block title %}
    <title>course</title>
{% endblock title %}

{% block content %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">课程管理</div>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-striped text-center">
                <thead>
                <tr>
                    <th class="text-center">序号</th>
                    <th class="text-center">课程名称</th>
                    <th class="text-center">课程学分</th>
                    <th class="text-center">开课时间</th>
                    <th class="text-center">课程老师</th>
                </tr>
                </thead>
                <tbody>
                {% for course_obj in course_queryset %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ course_obj.name }}</td>
                        <td>{{ course_obj.credit }}</td>
                        <td>{{ course_obj.course_open_time|date:'Y-m-d' }}</td>
                        <td>{{ course_obj.teacher.name }}</td>
                        <td>
                            <a href="{% url 'course:edit' course_obj.pk %}" class="btn btn-primary btn-sm">修改</a>
                            <button current_pk="{{ course_obj.pk }}" class="del_btn btn btn-danger btn-sm">删除</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <a href="{% url 'course:add' %}" class="add_btn btn btn-success pull-right">添加</a>
        </div>
    </div>
{% endblock content %}

{% block js %}
    <script>
        $('.del_btn').click(function () {
            let $that = $(this);
            $.ajax({
                url: '{% url "course:dels" %}',
                type: 'post',
                data: {
                    'current_pk': $(this).attr('current_pk'),
                },
                success: function (res) {
                    if (res.status === 2000) {
                        $that.parent().parent().remove();
                    } else {
                        window.location.reload();
                    }
                }
            })
        })
    </script>
{% endblock js %}